<template>
	<div class="p-6">
		<el-card class="!border-none p-6" shadow="never">
			<el-form class="ls-form el-set-form" :model="formData" inline>
				<el-form-item label="投诉订单编号：">
					<el-input class="w-[240px]" placeholder="请输入" v-model="formData.admin_name" clearable
						@keyup.enter="resetPage" />
				</el-form-item>
				<el-form-item label="销售：">
					<el-input class="w-[240px]" placeholder="请输入" v-model="formData.admin_name" clearable
						@keyup.enter="resetPage" />
				</el-form-item>
				<el-form-item label="投诉产品：">
					<el-select class="w-[240px]" v-model="formData.type" placeholder="请选择">
						<el-option v-for="(item, index) in visitType" :key="index" :label="item.label"
							:value="item.value" />
					</el-select>
				</el-form-item>
			</el-form>
			<div class="mt-[30px]">
				<div class="main-color text-xl font-bold">
					产品1
				</div>
				<div class="bg-[#F7FAFC] p-6 mt-[20px]">
					<el-row>
						<el-col :span="8">
							<el-form :model="form" label-width="120px">
								<el-form-item label="投诉描述：">
								  <div class="flex">
									  <div class="relative mr-[20px]" >
										  <div class="absolute" style="top: -12px;right: -8px;color: #999B9C;">
											  <el-icon class="text-3xl"><CircleCloseFilled /></el-icon>
										  </div>
										  <el-image style="width: 100px; height: 100px" 
										  src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" fit="fill" />
									  </div>
									  <el-upload
									      class="avatar-uploader bg-[#F7F7F7]"
									      action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
									      :show-file-list="false"
									      :on-success="handleAvatarSuccess"
									      :before-upload="beforeAvatarUpload"
									    >
									      <img v-if="imageUrl" :src="imageUrl" class="avatar" />
									      <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
									    </el-upload>
								  </div>
								</el-form-item>
								<el-form-item label="材质：">
								  <el-input v-model="form.name" />
								</el-form-item>
								<el-form-item label="数量：">
								  <el-input placeholder="请输入" v-model="form.name" />
								</el-form-item>
								<el-form-item label="投诉描述：">
								  <el-input 
								  :rows="4"
								  resize="none"
								  type="textarea"
								  placeholder="请输入" 
								  v-model="form.name" />
								</el-form-item>
							</el-form>	
						</el-col>	
					</el-row>	
				</div>
			</div>
		</el-card>
		<div class="mt-[40px]">
			<el-button class="main-color1 w-[76px] h-[36px]" >取消</el-button>
			<el-button class="w-[76px] bg-[#0054A6] h-[36px]" type="primary" >保存</el-button>
		</div>
	</div>
</template>

<script lang="ts" setup name="notice">
	import { ref } from 'vue'
	import { ElMessage } from 'element-plus'
	import { Plus } from '@element-plus/icons-vue'
	
	import type { UploadProps } from 'element-plus'
	
	const imageUrl = ref('')
	
	const handleAvatarSuccess: UploadProps['onSuccess'] = (
	  response,
	  uploadFile
	) => {
	  imageUrl.value = URL.createObjectURL(uploadFile.raw!)
	}
	
	const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
	  if (rawFile.type !== 'image/jpeg') {
	    ElMessage.error('Avatar picture must be JPG format!')
	    return false
	  } else if (rawFile.size / 1024 / 1024 > 2) {
	    ElMessage.error('Avatar picture size can not exceed 2MB!')
	    return false
	  }
	  return true
	}
	const formData = reactive({
		admin_name: '',
		url: '',
		ip: '',
		type: '',
		start_time: '',
		end_time: ''
	})
	const form = reactive({
	  name: '',
	})
	// 产品分类
	const visitType = ref<Array<any>>([
		{
			label: '内销',
			value: '1'
		},
		{
			label: '外销',
			value: '2'
		},
	])
</script>

<style lang="scss" scoped>
	.el-set-form:deep() .el-form-item__label{
		color: var(--el-text-color-main);
		height: 36px;
		line-height: 36px;
	}
	.el-set-form:deep() .el-input__inner{
		height: 36px;
	}
	.el-set-form:deep() .el-input__inner::placeholder {
		color: var(--el-text-color-main);
	}
	
	.avatar-uploader{
	  border: 1px dashed #eee;
	  border-radius: 6px;
	  cursor: pointer;
	  position: relative;
	  overflow: hidden;
	  transition: var(--el-transition-duration-fast);
	}
	
	.avatar-uploader .el-upload:hover {
	  border-color: var(--el-color-primary);
	}
	
	.el-icon.avatar-uploader-icon {
	  font-size: 28px;
	  color: #8c939d;
	  width: 100px;
	  height: 100px;
	  text-align: center;
	}
</style>